 
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
  <div id="app">
     	<div class="kuang">
		<div class="kuangHead"><h1>数据库配置</h1> <el-divider  content-position="left" > 数据库连接信息</el-divider></div>
		<div> 
			<el-form ref="form" :model="form" label-width="180px"> 
				<el-form-item label="数据库IP"> <el-input v-model="form.ip"></el-input> </el-form-item>
				<el-form-item label="数据库用户名"> <el-input v-model="form.username"></el-input> </el-form-item>
				<el-form-item label="数据库密码"> <el-input v-model="form.password"></el-input> </el-form-item>
			 
			 	<el-divider  content-position="left" >数据库创建</el-divider>
			 	<el-form-item label="创建数据库名"> <el-input v-model="form.database"></el-input> </el-form-item>
			 
				</el-form-item> <el-form-item> <el-button type="primary"
					@click="onSubmit">立即创建</el-button> <el-button>取消</el-button> </el-form-item>
			</el-form>
		</div>
</div>
  </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"> </script>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { 
            form: {
	        username: '',
	        password: '',
	        ip: 'localhost',
	        database:'gzxtdb'
	        } 
        }
      },

      methods: {
          onSubmit(formName) {
//         	  console.log(formName ,this.form,99999999);
        	  if(this.form.username =='' || this.form.password ==''){
        		  this.$message({
        	          showClose: true,
        	          message: '数据库用户名，数据库密码不能为空',
        	          type: 'error'
        	        });

            	  }
        	  axios.post('/api/installDB',this.form)
				.then(res => {
					console.log(res);
					if(res.data.Error === 0){
						  this.$message({
		        	          message: res.data.Message,
		        	          type: 'success'
		        	        });

						  location.href = "/dist";
						}else{
							this.$message({
			        	          message: res.data.Message,
			        	          type: 'error'
			        	        });
							}

					
				})
				.catch(error => {
					
				})
          }


          
        }
    })
  </script>
  
  	
 <style rel="stylesheet/scss" lang="scss" scoped>
  
  .kuang{width:40%;margin:0 auto;border:1px solid #ddd;padding:20px; }
  
  .kuangHead{text-align:center;}
  
</style>
  
  
</html>